<?php

$chartContent = '
<script type="text/javascript">
        $(function () {
            setTimeout(function(){
                Highcharts.data({
                    csv: document.getElementById(\'tsv\').innerHTML,
                    itemDelimiter: "",
                    parsed: function (columns) {

                        var brands = {},
                            brandsData = [],
                            versions = {},
                            drilldownSeries = [];

                        // Parse percentage strings
                        columns[1] = $.map(columns[1], function (value) {
                            if (value.indexOf(\'%\') === value.length - 1) {
                                value = parseFloat(value);
                            }
                            return value;
                        });

                        $.each(columns[0], function (i, name) {
                            var brand,
                                version;

                            if (i > 0) {

                                // Remove special edition notes
                                name = name.split(\' -\')[0];

                                // Split into brand and version
                                version = name.match(/([0-9]+[\.0-9x]*)/);
                                if (version) {
                                    version = version[0];
                                }
                                brand = name.replace(version, \'\');

                                // Create the main data
                                if (!brands[brand]) {
                                    brands[brand] = columns[1][i];
                                } else {
                                    brands[brand] += columns[1][i];
                                }

                                // Create the version data
                                if (version !== null) {
                                    if (!versions[brand]) {
                                        versions[brand] = [];
                                    }
                                    versions[brand].push([version, columns[1][i]]);
                                }
                            }

                        });

                        $.each(brands, function (name, y) {
                            brandsData.push({
                                name: name,
                                y: y,
                                drilldown: versions[name] ? name : null
                            });
                        });
                        $.each(versions, function (key, value) {
                            drilldownSeries.push({
                                name: key,
                                id: key,
                                data: value
                            });
                        });

                        // Create the chart
                        $(\'#container-'.$postId.'\').highcharts({
                            chart: {
                                type: \'column\'
                            },
                            title: {
                                text: \'Count vote of post\'
                            },
                            subtitle: {
                                text: ""
                            },
                            xAxis: {
                                type: \'category\'
                            },
                            yAxis: {
                                title: {
                                    text: \'Total percent vote \'
                                }
                            },
                            legend: {
                                enabled: false
                            },
                            plotOptions: {
                                series: {
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true,
                                        format: \'{point.y:.1f}%\'
                                    }
                                }
                            },

                            tooltip: {
                                headerFormat: \'<span style="font-size:11px">{series.name}</span><br>\',
                                pointFormat: \'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>\'
                            },

                            series: [{
                                name: "Brands",
                                colorByPoint: true,
                                data: ['.$seriesData.'

                                ]
                            }],
                            drilldown: {
                                series: drilldownSeries
                            }
                        })

                    }
                });
            }, 2000);
        });
    </script>
<div id="container-'.$postId.'" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version	Total Market Share</pre>';

echo $chartContent;

